<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>广告</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/Application/iframe/assets/libs/layuiadmin/layui/css/layui.css"/>
    <link rel="stylesheet" href="/Application/iframe/assets/libs/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/Application/iframe/assets/libs/layuiadmin/style/mylay.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layui-btn-danger btn-top" data-type="batchdel">批量删除</button>
                <button class="layui-btn btn-top" data-type="add">添加广告</button>
            </div>

            <table id="LAY-table" lay-filter="LAY-table"></table>
            <script type="text/html" id="pic">
                <img src="{{d.pic}}" title="点击放大" lay-event="show">
                <span style="display:none;" id="pic{{d.id}}"><img src="{{d.pic}}"></span>
            </script>
            <script type="text/html" id="show">
                {{#  if(d.is_show == 1){ }}
                <span class="yes_span"><i class="layui-icon layui-icon-ok-circle"></i> 是</span>
                {{#  } else { }}
                <span class="no_span"><i class="layui-icon layui-icon-tips"></i> 否</span>
                {{#  } }}
            </script>
            <script type="text/html" id="table-webuser">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script type="text/javascript" src="/Application/iframe/assets/libs/layuiadmin/layui/layui.js"></script>
<script>
    var url = '/admin/ads';
    layui.config({
        base: '/Application/iframe/assets/libs/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table;

        //初始化列表
        table.render({
            elem: '#LAY-table'
            ,url: url + "/getList.html?v=" + new Date().getTime() //接口
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', width: 80, title: 'ID', sort: true}
                ,{field: 'title', width:140, title: '名称'}
                ,{field: 'pic', width: 140, title: '图片', templet: '#pic'}
                ,{field: 'is_work', width: 100, title: '显示', templet: '#show', align:'center', sort: true}
                ,{title: '操作', width: 150, align:'center', fixed: 'right', toolbar: '#table-webuser'}
            ]]
            ,page: true
            ,limit: 20
            ,height: 'full-100'
            ,text: {none: '暂无相关数据'}
        });

        //监听编辑+单个删除
        table.on('tool(LAY-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        type:"post",
                        url:url + "/delete.html",
                        data: {id:data.id},
                        dataType:"json",
                        beforeSend: function () {
                            layer.load(1);
                        },
                        success:function(res){
                            layer.closeAll();
                            if(res.code == 1001){
                                obj.del();
                            }
                            else {
                                layer.msg(res.msg);
                            }
                        }
                    });

                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    ,title: '编辑广告'
                    ,content: url + '/edit/id/' + data.id + '.html'
                    ,maxmin: true
                    ,area: ['60%', '60%']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'LAY-submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                            var field = data.field; //获取提交的字段
                            var m_show = 0;
                            if (field.m_show != undefined){
                                m_show = field.m_show;
                            }
                            $.ajax({
                                type:"post",
                                url:url + "/save.html",
                                data: {
                                    title:field.m_title,
                                    pic:field.m_pic,
                                    type:field.m_type,
                                    is_show:m_show,
                                    id:field.m_id},
                                dataType:"json",
                                beforeSend: function () {
                                    layer.load(1);
                                },
                                success:function(res){
                                    layer.close(layer.index);
                                    if(res.code == 1001){
                                        layer.closeAll();
                                        table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
                                    }
                                    else {
                                        layer.msg(res.msg);
                                    }
                                }
                            });

                        });

                        submit.trigger('click');
                    }
                });
            } else if(obj.event === 'show'){
                layer.open({
                    type: 1,
                    shade: false,
                    title: false,
                    content: $('#pic' + data.id)
                });
            }
        });

        //批量删除+添加
        var active = {
            batchdel: function(){
                var checkStatus = table.checkStatus('LAY-table')
                    ,checkData = checkStatus.data //得到选中的数据
                    ,ids = "0";
                if(checkData.length === 0){
                    return layer.msg('请选择数据');
                }
                $.each(checkData,function(key,value){
                    ids = ids + "," + checkData[key]['id'];
                });
                layer.confirm('确定删除吗？', function(index) {
                    $.ajax({
                        type:"post",
                        url:url + "/delete.html",
                        data: {id:ids},
                        dataType:"json",
                        beforeSend: function () {
                            layer.load(1);
                        },
                        success:function(res){
                            layer.closeAll();
                            if(res.code == 1001){
                                table.reload('LAY-table',{where: {time:new Date()}});
                                layer.msg('已删除');
                            }
                            else {
                                layer.msg(res.msg);
                            }
                        }
                    });
                });
            }
            ,add: function(){
                layer.open({
                    type: 2
                    ,title: '添加广告'
                    ,content: "{:U('Ads/create')}"
                    ,maxmin: true
                    ,area: ['60%', '60%']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submitID = 'LAY-submit'
                            ,submit = layero.find('iframe').contents().find('#'+ submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                            var field = data.field; //获取提交的字段
                            var m_show = 0;
                            if (field.m_show != undefined){
                                m_show = field.m_show;
                            }

                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                type:"post",
                                url:url + "/save.html",
                                data: {
                                    title:field.m_title,
                                    pic:field.m_pic,
                                    type:field.m_type,
                                    is_show:m_show
                                },
                                dataType:"json",
                                beforeSend: function () {
                                    layer.load(1);
                                },
                                success:function(res){
                                    layer.close(layer.index);
                                    if(res.code == 1001){
                                        layer.closeAll();
                                        table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
                                    }
                                    else {
                                        layer.msg(res.msg);
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
        };

        $('.layui-btn.btn-top').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>